<template>
	<view style="width: 750rpx; background-color: #fcfcfc;">
	<view class="box">
		
		<view class="form">
			<uni-forms ref="form">
				<label style="font-size: 24rpx;color: #bcc3cd;">被保人</label>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">保障对象</label>
					<picker value="insured.select"  @change="insuredchange" :range="list" style="width: 380rpx;">
						<view style="display: flex;justify-content: space-between;">
							<view>{{insured.select}}</view>
							<view>></view>
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="" name="insured" class="item">
					<label style="margin-right:34rpx;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">身份证号</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view class="form">
			<uni-forms ref="form">
				<label style="font-size: 24rpx;color: #bcc3cd;">投保人</label>
				<uni-forms-item label="" name="insured" class="item">
					<label style="margin-right:34rpx;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
				<uni-forms-item label="" name="insured" class="item">
					<label style="margin-right:34rpx;">身份证号</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view class="form">
			<uni-forms ref="form">
				<label style="font-size: 24rpx;color: #bcc3cd;">保障内容</label>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">保障内容</label>
					<picker value="cont.cont" :range="contlist" @change="contchange" style="width: 380rpx;">
						<view style="display: flex;justify-content: space-between;">
							<view>{{cont.cont}}</view>
							<view>></view>
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="" name="insured" class="item">
					<label style="margin-right:34rpx;">生效日期</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费</label>
					<input type="text" value="" placeholder="请输入"/>
				</uni-forms-item>
				<uni-forms-item label="保障对象" name="insured" class="item">
					<label style="margin-right:34rpx;">付款方式</label>
					<picker value="cont.pay" :range="paylist" @change="paychange" style="width: 380rpx;">
						<view style="display: flex;justify-content: space-between;">
							<view>{{cont.pay}}</view>
							<view>></view>
						</view>
					</picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		
		
		<view @click="submit" style="width: 100%; margin-top: 68rpx; height: 98rpx;background: #3775f6;font-size:36rpx;color: #fff;line-height: 98rpx;text-align: center;">提交</view>
		
	</view>

	</view>
</template>

<script>
	import Ass from '@/components/Ass.vue'
	// import Ass from '../'
	export default {
		components:{
			Ass
		},
		data() {
			return {
				list:["父母","自己"],
				paylist:[
					"钱包","支付宝","微信"
				],
				contlist:[
					"老年人综合意外保险","年轻人综合意外保险"
				],
				cont:{
					cont:"",
					pay:"钱包",
					date:"",
					price:""
				},
				insured:{
					name:"",
					select:"父母"
				},
				labelstyle:{
					"font-size":"24rpx",
					"color":"#676767"
				}
			}
		},
		methods: {
			insuredchange(e){
				this.insured.select = this.list[e.detail.value]
			},
			paychange(e){
				this.cont.pay = this.paylist[e.detail.value]
			},
			contchange(e){
				this.cont.cont = this.contlist[e.detail.value]
			},
			submit(){
				uni.navigateTo({
					url:"/pages/buyin/buyin"
				})
			}
		} 
	}
</script>

<style>

	.box{
		width: 670rpx;
		padding: 40rpx;
		margin: 20rpx auto;
		font-size: 24rpx;
		color: #676767;
	}
	.item{
		display: flex;
		padding: 28rpx 0rpx;
		border-bottom: 2rpx #f0f0f0 solid;
	}
	.form{
		margin:10rpx 0;
		background-color:#fff;
		padding: 40rpx;
	}
</style>
